Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2016, 18:27
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

AJAX переходы по страницам
Добрый день.
Сделал AJAX навигацию, при переходе по ссылкам меняется только контентная часть. Все было сделано для того, чтобы не перегружался плеер, работающий на сайте.
Работает все этим скриптом:

$(document).ready(function() {
	$('a.menuside').click(function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
	$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
	})
});


Но проблема во в чем, если я перехожу с меню со страницы site.ru на страницу site.ru/razdel - все работает как надо.
Если же я сразу же пытаюсь перейти со страницы site.ru/razdel на страницу site.ru/razdel/razdel - то происходит просто переход по ссылке, а, значит, обновление страницы.

Но если после первого перехода обновить страницу (site.ru/razdel) и кликнуть по ссылке перехода на site.ru/razdel/razdel - то все работает как положено. Почему не работает 2 перехода по очереди?
Ответить с цитированием
  #2 (permalink)  
Старый 20.05.2016, 11:38
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

Batyabest,
(function() {
	$('a.menuside').on('click', function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
		$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
			$('#wrapcontent').fadeOut(300, function() {
				history.pushState(null, null, murl);
				$(this).html(data).fadeIn(800);
			});
		});
	})
})();
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2016, 15:48
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Спасибо, попробую, отпишусь!
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2016, 10:49
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Сообщение от Alex_63 Посмотреть сообщение
Batyabest,
(function() {
	$('a.menuside').on('click', function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
		$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
			$('#wrapcontent').fadeOut(300, function() {
				history.pushState(null, null, murl);
				$(this).html(data).fadeIn(800);
			});
		});
	})
})();
Не работает. Пытался даже разными скриптами осуществлять работу.
1. Ссылка с меню в боковом меню - переход работает как положено, через ajax. Здесь работает этот скрипт:

$(document).ready(function() {
	$('a.menuside').click(function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
	$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
	})
});


После перехода в контентной части сайта появляются нужные нам блоки, со ссылками, а адрес в строке браузера подменяется путем
history.pushState(null, null, murl);

И тут уже при переходе по ссылке из контентной части сайта (не из бокового меню), переход по ajax не работает, происходит обычный переход по ссылке, с перезагрузкой страницы.
Здесь работать должен этот скрипт:

$(document).ready(function() {
	$('a.playlist').click(function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
	$.post(document.location.href, {action:action,mid:mid}, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
	})
});


Они идентичны, за исключением класса ссылки.
Обратный же переход по ссылкам из бокового меню работает как надо.

Скажите, где что неправильно написано?
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2016, 19:11
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

Batyabest,
А так ?
$('a.menuside,a.playlist').on('click', function(m) {
	m.preventDefault();
	var action = $(this).data('action'),
		mid = $(this).data('mid'),
		mtpl = $(this).data('mtpl');
	var obj = {action:action,mid:mid};
	if (mtpl) { obj['mtpl'] = mtpl; }
	$.post(document.location.href, obj, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
})
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2016, 01:25
Аватар для Botik21
Аспирант
Отправить личное сообщение для Botik21 Посмотреть профиль Найти все сообщения от Botik21
 
Регистрация: 01.06.2016
Сообщений: 87

После обновления контент части надо обработчики на a.playlist по новой повесить
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2016, 11:14
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

Botik21,
Насколь я помню, метод on в jQuery вешает обработчики не ток на те элементы, которые уже есть на момент срабатывания скрипта, но и на те, которые появляются после ...
http://jquery.page2page.ru/index.php5/On
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2016, 11:29
Аватар для Botik21
Аспирант
Отправить личное сообщение для Botik21 Посмотреть профиль Найти все сообщения от Botik21
 
Регистрация: 01.06.2016
Сообщений: 87

Да, вы правы.
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2016, 21:59
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Как же тогда мне поправить скрипт, чтобы обработчики навешивались?
Ответить с цитированием
  #10 (permalink)  
Старый 02.06.2016, 08:54
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Alex_63, Botik21, Rise,
Вот сайт http://rock33.ru/
При включении музыки на главной из списка треков снизу - все работает как положено.

При переходе в пункт меню "Музыка" - плеер работает нормально.
Проблема была в том, чтобы перейти уже в какой-то раздел, например, "Поп"
Это я решил таким путем:
В конце скрипта
$('head').append("<script src='/assets/theme/js/script.js'></script>");

Но чувствую, что это сильно костыльное решение, потому что в итоге этот скрипт грузится на странице 2 раза. Как сделать все по фен-шую?

Но вот уже со следующей проблемой я таким образом справится не смог.
Дело в том, что если мы таким образом переходим в раздел "Поп" и там пытаемся запустить музыку, то она открывается не в плеере, а в новом окне.
В консоли путем команды getEventListeners($0) Видим, что нет объекта.
http://prntscr.com/bbazbx
Если же обновить станицу, то по той же команде видим объект
http://prntscr.com/bbaz6r
И по клику музыка открывается в плеере как положено.

Почему так происходит не могу понять, подскажите, люди добрые)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправка формы после ajax проверки ShutTap Общие вопросы Javascript 15 08.04.2016 11:46
Объект ajax и приостановка функции kilohertz_. AJAX и COMET 5 18.01.2015 16:33
отловить переходы по страницам ВК Vampir3 Общие вопросы Javascript 1 09.06.2014 09:13
Ajax таблица gofkane Работа 0 25.09.2011 11:53
Ajax разбор метода mycoding jQuery 14 21.05.2010 10:57